<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .down{
            position: absolute;
            top:31px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model.number="count">
        <input v-model.number="score">
        <com :count="count" :score="score" @give="give"></com>

    </div>
    <script src="./vue.js"></script>
    <script type="text/html" id="com">
        <div>
            <div class="up">
                <img src="./star.png" alt="" v-for="n in count" @click='click(n)'>
            </div>
            <div class="down">
                <img src="./star1.png" alt="" v-for="n in Math.floor(score)" @click='click(n)'>
                <!--<img style="overflow:hidden" src="./star1.png" alt="" @click='click(n)' :style="styleList">-->
            </div>
        </div>
    </script>

    <script>
        Vue.component('com',{
            template:'#com',

            props:['count','score'],
            methods:{
                click:function(a){
                    console.log(a)
                    this.$emit('give',a)
                }
            },
            // computed:{
            //     styleList:function(){
            //         var b = this.score%1
            //         if(b!=0){
            //             return{
            //                 width:b*45 +'px'
            //             }
            //         }else{
            //             return{
            //                 width :0
            //             }
            //         }
            //     }
                
            // }
        })
        new Vue({
            el:'#app',
            data:{
                count:10,
                score:3,
            },methods:{
                give:function(e){
                    console.log(e)
                    this.score = e
                }
            }
        })
    </script>
</body>
</html>